<div id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-class=" {'layout-boxed': admin.layout} ">
    <header data-ng-controller="WFHeaderCtrl" data-ng-include=" 'templates/main/header/header.html' " id="header"
            class="header-container {{admin.navbarHeaderColor}}"
          data-ng-class="{'header-fixed': admin.fixedHeader}"></header>
  <div id="wf-main-container" class="main-container">
    <aside data-ng-include="'templates/main/nav/nav.html'" id="nav-container" class="nav-container {{admin.asideColor}}"
           data-ng-class=" {'nav-fixed': admin.fixedSidebar, 'nav-horizontal': admin.menu}"></aside>
    <div id="content" class="content-container animate-fade-up">
      <!--<div class="tab-view" id="uiv_about" ui-view="'about'"></div>-->
      <ul id="myTab" class="nav nav-tabs">
        <li ng-class="{'active':tab.href==$root.navTabs.active}" ng-repeat="tab in $root.navTabs.arrs">
          <a ng-click="clickTab($event,tab.href)"  href="javascript:void(0)">
            <span ng-if="tab.icon" class="tab-icon fa {{tab.icon}}"></span>
            <span ng-if="tab.href!='welcome'">{{tab.name}}</span>
            <span ng-click="closeTab($event,tab.href)" ng-if="tab.href!='welcome'" class="glyphicon glyphicon-remove"></span>
          </a>

        </li>
      </ul>
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade" ng-class="{'in active':state.href==$root.navTabs.active}"
             ui-view="{{state.href}}" ng-repeat="state in $root.navTabs.arrs">
        </div>
      </div>
      <div id="modalContent"></div>
    </div>
    <!--<aside data-ng-include=" 'views/rightsidebar/rightsidebar.html' " id="rsidebar" class="rsidebar hidden-xs"></aside>-->
  </div>
</div>